<template>
    <button class="btn" :disabled="disabled" :style="`width:${width};height:${height}`">
        <slot></slot>
    </button>
</template>

<script lang="ts" setup>
    const props = defineProps({
        width:{type:String,default:'80px'},
        height:{type:String,default:'40px'},
        disabled:{type:Boolean,default:false},
    })
</script>

<style lang="scss" scoped>
.btn{
    box-sizing: border-box;
    outline: none;
    padding: 0 10px;
    text-align: center;
    background: $color3;
    border: 0;
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
}
.btn:hover{
    opacity: .7;
}
</style>    